<template>
  <view class="qiuqian-wrapper" v-if="isShowMsg === 'Y'">
    <image class="my-bg" src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill" />

    <view class="record-content">
      <tui-card>
        <template v-slot:body>
          <tui-form ref="form">
            <tui-list-cell padding="0" :hover="false">
              <view class="tui-list-cell tui-list-cell-name">
                <view class="left-label">{{ currentFlag == 2 ? '男' : '甲' }}方姓名</view>
                <view class="tui-content">
                  <tui-input backgroundColor="none" color="#666" size="26rpx" padding="6rpx 0" :borderBottom="false"
                    textRight v-model="baseFormData.male_name" placeholder="请输入姓名"></tui-input>
                </view>
              </view>
            </tui-list-cell>
            <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerSelect(1)">
              <view class="tui-list-cell">
                <view class="left-label">日期类型</view>
                <view class="tui-content">{{ baseFormData.male_type == 0 ? '农历' : '公历' }}</view>
              </view>
            </tui-list-cell>

            <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerClickDate(1)">
              <view class="tui-list-cell">
                <view class="left-label">出生日期</view>
                <view class="tui-content">{{ baseFormData.maleDate || '请选择日期' }}</view>
              </view>
            </tui-list-cell>
          </tui-form>
        </template>
      </tui-card>

      <tui-card>
        <template v-slot:body>
          <tui-form ref="form">
            <tui-list-cell padding="0" :hover="false">
              <view class="tui-list-cell tui-list-cell-name">
                <view class="left-label">{{ currentFlag == 2 ? '女' : '乙' }}方姓名</view>
                <view class="tui-content">
                  <tui-input backgroundColor="none" color="#666" size="26rpx" padding="6rpx 0" :borderBottom="false"
                    textRight v-model="baseFormData.female_name" placeholder="请输入姓名"></tui-input>
                </view>
              </view>
            </tui-list-cell>
            <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerSelect(2)">
              <view class="tui-list-cell">
                <view class="left-label">日期类型</view>
                <view class="tui-content">{{ baseFormData.female_type == 0 ? '农历' : '公历' }}</view>
              </view>
            </tui-list-cell>

            <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerClickDate(2)">
              <view class="tui-list-cell">
                <view class="left-label">出生日期</view>
                <view class="tui-content">{{ baseFormData.femaleDate || '请选择日期' }}</view>
              </view>
            </tui-list-cell>
          </tui-form>
        </template>
      </tui-card>

      <tui-form-button style="margin-top:20px;padding:10px;box-sizing: border-box" radius="50px" background="#c09351"
        @click="handerClick">立即{{ currentFlag == 2 ? '合婚' : '合盘' }}</tui-form-button>
    </view>

    <tui-datetime ref="dateTime" type="1" @confirm="changeDate"></tui-datetime>

    <tui-picker :show="showSelect" :pickerData="typeDateList" @hide="handerOnClose"
      @change="handerConfirm"></tui-picker>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import showPage from '@/utils/showPage'


export default {
  mixins: [showPage],

  data() {
    return {
      currentFlag: null,
      baseFormData: {
        // 男方信息
        male_name: null,
        male_type: 1,
        maleDate: null,
        male_year: null,
        male_month: null,
        male_day: null,
        male_hours: null,
        male_minute: null,

        //女方信息
        female_name: null,
        female_type: 1,

        femaleDate: null,
        female_year: null,
        female_month: null,
        female_day: null,
        female_hours: null,
        female_minute: null
      },
      showSelect: false,

      selectFlag: null,
      selectList: [],

      isMale: 1, // 1 male

      // 日期类型
      typeDateList: [
        {
          text: "农历",
          value: 0
        },
        {
          text: "公历",
          value: 1
        }
      ]
    };
  },
  onLoad(option) {
    this.currentFlag = option.flag;
  },
  onShow() {


  },
  methods: {

    handerSelect(flag) {
      this.isMale = flag;

      this.showSelect = true;

      this.selectList = JSON.parse(JSON.stringify(this.typeDateList));
    },
    handerConfirm(e) {
      if (this.isMale == 1) {
        this.baseFormData.male_type = e.value;
      } else if (this.isMale == 2) {
        this.baseFormData.female_type = e.value;
      }
      this.showSelect = false;
    },
    handerOnClose() {
      this.showSelect = false;
    },

    handerClickDate(flag) {
      this.isMale = flag;
      this.$refs.dateTime && this.$refs.dateTime.show();
    },
    changeDate(e) {
      if (this.isMale == 1) {
        this.baseFormData.maleDate = e.result;
        this.baseFormData.male_year = parseInt(e.year);
        this.baseFormData.male_month = parseInt(e.month);
        this.baseFormData.male_day = parseInt(e.day);
        this.baseFormData.male_hours = parseInt(e.hour);
        this.baseFormData.male_minute = parseInt(e.minute);
      } else if (this.isMale == 2) {
        this.baseFormData.femaleDate = e.result;
        this.baseFormData.female_year = parseInt(e.year);
        this.baseFormData.female_month = parseInt(e.month);
        this.baseFormData.female_day = parseInt(e.day);
        this.baseFormData.female_hours = parseInt(e.hour);
        this.baseFormData.female_minute = parseInt(e.minute);
      }
    },

    async handerClick() {
      let mynavData = JSON.stringify(this.baseFormData); // 这里转换成 字符串

      if (!this.baseFormData.male_name || !this.baseFormData.female_name) {
        let params = {
          title: "双方姓名不能为空"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      }

      if (!this.baseFormData.male_year || !this.baseFormData.female_year) {
        let params = {
          title: "双方出生日期不能为空"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      }
      if (this.currentFlag == 3) {
        uni.navigateTo({
          url: `/pqgeInfo/hepan/hepan?baseFormData=${mynavData}&currentFlag=${this.currentFlag}`
        });
      } else {
        uni.navigateTo({
          url: `/pqgeInfo/hehun/hehun?baseFormData=${mynavData}&currentFlag=${this.currentFlag}`
        });
      }
    }
  }
};
</script>

<style lang="scss">
.qiuqian-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  background: #f6f6f6;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .record-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    // background: #fff;
    // padding: 12px;
    position: relative;
    z-index: 1;

    .tui-list-cell {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 60rpx 24rpx 30rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      position: relative;
      background: none !important;

      &.tui-list-cell-name {
        padding: 17rpx 20rpx 17rpx 30rpx;
      }

      .left-label {
        font-size: 26rpx;
        color: #666;
      }

      .tui-cell__line {
        border-bottom: none !important;
      }

      .file_input {
        position: absolute;
        z-index: 1;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    .tui-card-header {
      display: none !important;
    }
  }
}
</style>
